<template>
  <div>
    <el-container style="height: 900px; border: 1px solid #eee">
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>新增</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-header>
        <el-main>
          <el-table :data="list">
            <el-table-column label="sbId" width="150">
              <template slot-scope="scope">
                {{ scope.row.sbId }}
              </template>
            </el-table-column>
            <el-table-column prop="sbName" label="设备名字" width="150"></el-table-column>
            <el-table-column prop="sbMod" label="设备型号" width="150"></el-table-column>
            <el-table-column prop="sbFac" label="制造厂家 "width="150"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="modifyUser(scope.row.sbId)">
                  修改
                </el-button>
                <el-button type="danger" @click="removeUser(scope.row.sbId)">
                  删除
                </el-button>
              </template>

            </el-table-column>
          </el-table>
          <pagination
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getList" />
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
  import Pagination from '@/components/Pagination'
  export default {
    components: { Pagination },
    data() {
      return {
        list: null,
        total: 0,
        listQuery: {
          page: 1,
          limit: 10
        }
      }
    },
    mounted() {
      this.getUserByPage();
    },
    methods:{
		
      getList() {
        // 获取数据
        this.getUserByPage();
      },
      getUserByPage(){
        var obj = this;
        this.axios({
          method:"get",
          url:"http://localhost:8088/sb/getUsersByPage/"+obj.listQuery.page+"/"+obj.listQuery.limit
        }).then(function(response){
          var result = response.data;
          if (result.code == 1000) {
            console.log(result.data)
            obj.list = result.data.list;
            obj.total = result.data.total;
			
          } else{
            console.log("请求数据失败")
          }
        })
      },
      modifyUser(id){
        //alert("修改===>" + id);
        this.$router.push("sb/modify/" + id)
      },
			removeUser(id){
			  var obj = this;
			  this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			  }).then(() => {
			      obj.axios({
			        method:"post",
			        url:"http://localhost:8088/sb/delet/"+id,
			      }).then(function(response){
					  var result1 = response.data;
					  //alert(result1.code);
					if(result1.code==1000){
						obj.$message({
						  type: 'success',
						  message: '删除成功!',
						}),
						obj.getUserByPage();
					}else{
						obj.$message({
						  type: 'info',
						  message: '删除失败(该设备已被'+result1.code+'人使用中)',
						}),
						obj.getUserByPage();
					}
			    });
			  }).catch(() => {
			    obj.$message({
			      type: 'info',
			      message: '已取消删除'
			    });
			  });
			}
    //   removeUser(id){
    //     var obj = this;
    //     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //         obj.axios({
    //           method:"get",
    //           url:"http://localhost:8088/sb/delet/"+id
    //         }).then(function(result){
				// if(result.code==1000){
				// 	obj.$message({
				// 	  type: 'info',
				// 	  message: '删除成功'
				// 	});
				// };
				// if(result.code==0){
				// 	obj.$message({
				// 	  type: 'info',
				// 	  message: '删除shibai'
				// 	});
				// };
    //           obj.getUserByPage();
    //       });
    //     }).catch(() => {
    //       obj.$message({
    //         type: 'success',
    //         message: '已取消删除!'
    //       })
    //     });
    //   }
    }
  };
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
